<template>
    <div class="recommend">
        <div class="recommendTitle">
            <span class="recommendTitleIcon iconfont">&#xe60c;</span>
            <h3 class="recommendTitleDesc">去哪儿推荐</h3>
        </div>
        <div class="recommendContent border-top" v-for="(item,index) of list" :key="index">
            <div class="listContent">
                <div class="contentTitle">{{item.title}}</div>
                <div class="contentTime">
                    <span class="timeIcon iconfont">&#xe609;</span>
                    {{item.time}}
                </div>
                <div class="contentLabel">
                    <div class="labelContent border" v-for="(item2,index2) of item.label" :key="index2">
                        {{item2}}
                    </div>
                </div>
            </div>
            <div class="listPrice">
                <div class="priceNumber">{{item.priceNumber}}</div>
                <button class="priceButton">{{item.priceButton}}</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'DetailRecommend',
    data () {
        return {
            list:[
                {
                    title:'【当日票】故宫成人票凭身份证入园（随买随用，快速入园）',
                    time:'15:30前随买随用',
                    label:['自营','无需换票','条件退'],
                    priceNumber:'￥40',
                    priceButton:'预订'
                },
                {
                    title:'【下午场】故宫成人票凭身份证快速入园（淡季）',
                    time:'23:59前可订明日',
                    label:['自营','无需换票','条件退'],
                    priceNumber:'￥40',
                    priceButton:'预订'
                },
                {
                    title:'【去哪儿精选】天安门+故宫+八达岭+鸟巢+耳麦* 赠珍宝馆',
                    time:'23:00前可订明日',
                    label:['条件退','无购物','已售3964'],
                    priceNumber:'￥148.0',
                    priceButton:'查看'
                },
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'	
@import '~styles/mixins.styl'

.recommend
    position relative
    background #fff;
    margin-bottom .2rem
    padding-left .2rem
    .recommendTitle
        display flex
        height .88rem
        line-height .88rem
        padding-left .1rem
        .recommendTitleIcon
            color #ff6e6e
        .recommendTitleDesc
            font-size .32rem
            text-indent .2rem
    .recommendContent
        display flex
        padding .2rem .2rem .24rem 0
        color #616161
        .listContent
            flex 3
            .contentTitle
                margin-right .1rem
                line-height .52rem
                padding 0
                font-size .3rem
            .contentTime
                height .32rem;
                font-size: .24rem
                line-height: .32rem
                /*元素内的空白不换行*/
                white-space: nowrap;
                .timeIcon
                    font-size .24rem
                    color #00bcd4
            .contentLabel 
                .labelContent
                    display inline-block
                    margin-top .08rem
                    margin-right .1rem
                    padding 0 .04rem
                    height .32rem
                    color #00afc7
                    font-size .2rem
                    line-height .32rem
                    white-space nowrap
                .labelContent:before
                    border-color #a5e4ec
                    border-radius .08rem
        .listPrice
            flex 1
            text-align center
            detailMore()
            .priceNumber
                text-align center
                width 1.7rem
                height .4rem
                font-size .4rem
                color $detailColor
            .priceButton
                width 1.7rem
                height .6rem
                color #fff
                font-size .28rem
                line-height .6rem
                text-align center
                border-radius .08rem
                background-image linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%)
</style>
